<script>
import { defineComponent, ref, onMounted } from '@vue/composition-api';
import { GetActivityCommentList } from '@/api/activity';

export default defineComponent({
  props: {
    activityId: String,
  },
  setup(props) {
    const loading = ref(false);
    const list = ref([]);
    const pageNum = ref(1);
    const pageSize = ref(10);
    const total = ref(0);

    const loadData = async () => {
      loading.value = true;
      const payload = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        activityId: props.activityId,
      };
      const response = await GetActivityCommentList(payload);
      loading.value = false;
      if (response.code === 200) {
        const { rows, total: rowTotal } = response;
        list.value = rows;
        total.value = rowTotal;
      }else{
        loading.value = false;
      }
    };

    onMounted(() => {
      loadData();
    });
    return {
      loadData,
      loading,
      list,
      total,
      pageNum,
      pageSize,
    };
  },
});
</script>

<template>
  <div>
    <el-table v-loading="loading" :data="list" border>
      <el-table-column label="学号" align="center" prop="studentId" />
      <el-table-column label="姓名" align="center" prop="nickName" />
      <el-table-column label="系部" align="center" prop="unitName" />
      <el-table-column label="签到/签退时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime }}
          <br />
          {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column label="评价星级" align="center" prop="score" />
      <el-table-column label="评价内容" align="center" prop="comment" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="loadData"
    />
  </div>
</template>
